<template>
  <div class="text item dashboard-chart-pie" ref="pie" />
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixin/resize'

export default {
  name: 'ChartPie',
  mixin: [resize],
  mounted() {
    const myEcharts = echarts.init(this.$refs.pie)
    myEcharts.setOption({
      // tooltip: {
      //   trigger: 'item'
      // },
      // legend: {
      //   top: '5%',
      //   left: 'center'
      // },
      title: {
        text: this.name,
        subtext: this.value,
        textStyle: {
          color: '#464646',
          fontWeight: 'normal',
          fontSize: 14
        },
        subtextStyle: {
          color: '#6E7079',
          fontSize: 30
        },
        left: 'center',
        top: '43%',
        itemGap: 20
      },
      series: [
        {
          name: 'ChartPie',
          type: 'pie',
          radius: ['40%', '70%'],
          // avoidLabelOverlap: false,
          label: {
            show: true,
            // 格式化显示文本
            formatter: '{b}:{c}'
            // position: 'center'
          },
          emphasis: {
            label: {
              show: true
              // fontSize: '40',
              // fontWeight: 'bold'
            }
          },
          // labelLine: {
          //   // show: false
          // },
          data: [
            { value: 312, name: '家用电器' },
            { value: 336, name: '食用酒水' },
            { value: 342, name: '个护健康' },
            { value: 97, name: '服饰箱包' },
            { value: 181, name: '母婴产品' },
            { value: 94, name: '其他' }
          ],
          itemStyle: {
            borderWidth: 2,
            borderColor: '#fff'
          }
        }
      ]
    })
    myEcharts.on('mouseover', params => {
      const { value, name } = params.data
      myEcharts.setOption({
        title: {
          text: name,
          subtext: value
        }
      })
    })
    this.myEcharts = myEcharts
  }
}
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

// .clearfix:before,
// .clearfix:after {
//   display: table;
//   content: '';
// }
// .clearfix:after {
//   clear: both;
// }

.dashboard-chart-pie {
  width: 100%;
  // height: 100%;
  // width: 300px;
  height: 500px;
}
</style>
